<script setup lang="ts">
import { BellFilled, Delete } from "@element-plus/icons-vue"; //导入图标
import { useRouter, useRoute } from "vue-router";
import { useToken } from "../stores/token"; //导入 token 状态文件
import { useAdmin } from "../stores/admin"; //导入 admin 状态文件
import { ElMessage } from "element-plus"; //导入消息框
import { inject, type Ref } from "vue"; //引入 vue 函数
//执行方法获得 tokenStore 对象
const tokenStore = useToken();
const adminStore = useAdmin();
//依赖注入，父组件传递过来的头像图片
const headImage = inject<Ref>("headImage");
const router = useRouter();
const route = useRoute();
function clickMenu(key: string) {
  if (key == "/logout") {
    //退出登录 -移除 token
    tokenStore.removeToken();
    //删除用户信息
    adminStore.removeAdmin();
    //提示信息
    ElMessage.success("退出登录成功");
    //跳转到登录页面
    router.push("/login");
  } else {
    //跳转到个人中心
    router.push(key);
  }
}
</script>
<template>
  <section class="top">
    <div class="title">{{ route.meta.title }}</div>
    <el-menu @select="clickMenu" mode="horizontal" :ellipsis="false">
      <el-sub-menu index="/account">
        <template #title>
          <div class="user_icon">
            <img :src="headImage" />
          </div>
        </template>
        <el-menu-item index="/person">
          <el-icon><BellFilled /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="/logout">
          <el-icon><Delete /></el-icon>
          <span>退出登录</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </section>
</template>
<style scoped>
.top {
  border-bottom: 1px solid #dcdfe6;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .title {
  color: #666666;
  font-size: 20px;
  margin-left: 20px;
}
.top .el-menu {
  margin-right: 20px;
}
.top .user_icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top img {
  width: 40px;
  height: 40px;
  border-radius: 50px;
}
</style>
